<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			div#cirle{
				border: 1px solid skyblue;
			width: 200px;
			height: 200px;
			border-radius: 200px;
			box-shadow: 5px 5px 700px 500px pink ;
			}
			div#triangle{
				width: 0;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid blue;
				
			}
			div#bule{
				width: 0;
				border: 50px solid transparent;
				border-top-color:rgba(0,0,255,.3);
			}
			/*outline 边框轮廓   只针对input元素*/
			input{
				outline: 5px solid green;
			}
			
			
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		<div id="bule"></div>
		边框：<input type="text" />
	</body>
</html>